<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat room websocket</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body class="container" style="width: 60%">
<div class="form-group"></br>
    <h5>聊天室</h5>
    <textarea id="message_content" class="form-control" readonly="readonly" cols="50"
              rows="10"></textarea>
    <img id="socketImg" src="../img/default.jpg"></img>
</div>
<div class="form-group">
    <label for="in_user_name">⽤户姓名 &nbsp;</label>
    <input id="in_user_name" value="" class="form-control"/></br>
    <label for="in_user_name">房间名 &nbsp;</label>
    <input id="in_room_id" value="" class="form-control">
    <button id="user_join" onclick="verificationValue()" class="btn btn-success">加入聊天室</button>
    <button id="user_exit" onclick="outRoom()" class="btn btn-warning">离开聊天室</button>
</div>
<div class="form-group">
    <label for="in_room_msg">群发消息 &nbsp;</label>
    <input id="in_room_msg" value="" class="form-control"/></br>
    <button id="user_send_all" onclick="sendInfo()" class="btn btn-info">发送消息</button>
</div>
<script>
    var socket;//websocket连接
    // var webSocketUrl = 'ws://127.0.0.1:8033/websocket/';//websocketi连接地址
    var webSocketUrl = 'ws://172.17.200.130:8033/websocket/';//websocketi连接地址
    var roomId = "";//房间号
    var userName = "";//用户名
    //创建websocket连接
    function createWebSocketConnect(roomId) {
        if (!socket) {//避免重复连接
            console.log(roomId);
            socket = new WebSocket(webSocketUrl + roomId);
            socket.onopen = function () {
                console.log("websocket已连接");
                socket.send(userName + "已经成功加入房间");
            };
            socket.onmessage = function (e) {
                //服务端发送的消息
                console.info("服务端主动发送的消息：",e);
                if(e.data instanceof Blob){
                    console.info("服务端主动发送的消息：判断是不是blob");
                    //是bolb  渲染成图片
                    // var imageUrl = (window.URL || window.webkitURL).createObjectURL(e.data);
                    // console.info("imageUrl=",imageUrl);
                    //$('#image').attr("src", imageUrl);
                    console.info("e.data=",e.data);
                    console.info("e.data.prototype=",e.data.prototype);
                    console.info("e.data.arrayBuffer=",e.data.arrayBuffer());

                    var tempBlob=window.URL.createObjectURL(e.data);
                    console.info("tempBlob=",tempBlob);
                    // var img = document.createElement("img");
                    // img.src = tempBlob;
                    $('#socketImg').attr("src", tempBlob);
                    // console.info("img=",img);
                    $("#message_content").append( '发了一张图片\n');

                    // var bytes = new Uint8Array(e.data);
                    // var storeData = "";
                    // var len = bytes.byteLength;
                    // for (var i = 0; i < len; i++) {
                    //     storeData += String.fromCharCode(bytes[i]);
                    // }
                    // console.info("storeData=",storeData);
                    // var code='data:image/png;base64,'+ window.btoa(storeData);
                    //
                    // console.info("img.src=",code);
                    // var img="<img src='"+code+"'></img>";
                    // console.info("img=",img);
                    // $("#message_content").append(img + '\n');

                    // var bytes = new Uint8Array(e.data.arrayBuffer());
                    // var storeData = "";
                    // var len = bytes.byteLength;
                    // for (var i = 0; i < len; i++) {
                    //     storeData += String.fromCharCode(bytes[i]);
                    // }
                    // console.info("storeData=",storeData);
                    // var code='data:image/png;base64,'+ window.btoa(storeData);
                    // console.info("img.src=",code);
                    // var img="<img src='"+code+"'></img>";
                    // console.info("img=",img);
                    // $("#message_content").append(img + '\n');


                    // blobToDataURI(e.data, function (srcData) {
                    //     console.log(srcData);
                    //
                    //     var img="<img src='"+srcData+"'></img>";
                    //     console.info("img=",img);
                    //     $("#message_content").append(img + '\n');
                    //
                    // });

                    const a = document.createElement('a');
                    const url = window.URL.createObjectURL(e.data);
                    console.info("url=",url);
                    const filename = '导出文件.jpg'; // 设置导出的文件名
                    a.href = url;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);

                }else{
                    $("#message_content").append(e.data + '\n');
                }


            };
            socket.onclose = function () {
                socket.send(userName + "已经退出房间");
            }
        }
    }

    function blobToDataURI(blob, callback) {

        var reader = new FileReader();
        reader.onload = function (e) {
            callback(e.target.result);
        }
        reader.readAsDataURL(blob);
    }

    //验证用户名和房间号是否填写
    function verificationValue() {
        roomId = $("#in_room_id").val();
        userName = $("#in_user_name").val();
        if (roomId === "" || userName === "") {
            alert("请填写用户名并填写要加入的房间号");
            return;
        }
        createWebSocketConnect(roomId, userName);
    }

    //群发消息
    function sendInfo() {
        let msg = $('#in_room_msg').val();
        if (socket) {
            socket.send(userName + ":" + msg)
        }
    }

    //离开房间
    function outRoom() {
        if (socket) {
            socket.send(userName + "已退出");
            socket.close();
            $("#message_content").append(userName + "已退出");
        }
    }

</script>
</body>
</html>
